<template>
  <div
    :class="'h-tree-box' + (dark ? ' h-dark' : '')"
    :style="{
      'background-color': backgroundColor,
      'border-color': borderColor,
      'color': color,
      'font-size': fontSize
    }"
  >
    <el-input
      v-if="showSearch"
      v-model="search"
      class="tree-search"
      placeholder="请输入内容"
      suffix-icon="el-icon-search"
    />
    <el-tree
      ref="elementTree"
      class="camera-tree"
      :data="data"
      :default-checked-keys="defaultCheckedKeys"
      :default-expanded-keys="defaultExpandedKeys"
      :default-expand-all="defaultExpandAll"
      :props="props"
      :show-checkbox="showCheckbox"
      :current-node-key="currentNodeKey"
      :node-key="nodeKey"
      :highlight-current="true"
      :filter-node-method="filterNode"
      @check-change="handleCheckChange"
      @node-click="treeClick"
      @check="treeCheck"
      @current-change="$emit('current-change', $event)"
    >
      <span slot-scope="{ node, data }" class="tree-ellipsis" :title="node.label">
        <i
          v-if="data.icon"
          :class="data.icon + (data.online ? ' online' : '')"
        />
        <em>{{ node.label }}</em>
        <i
          v-if="data.isPlay"
          class="el-icon-video-play play"
        />
      </span>
    </el-tree>
    <date-dialog ref="dateDialog" @get-replay-date="getReplayDate" />
  </div>
</template>

<script>
import DateDialog from './components/DateDialog'

export default {
  name: 'LayoutTree',
  components: {
    DateDialog
  },
  props: {
    theme: { type: String, default: 'blue' }, // 主题默认 blue
    nodeKey: { type: String, default: 'id' }, // 节点唯一标识key
    showCheckbox: { type: Boolean, default: false }, // 是否显示多选框
    accordion: { type: Boolean, default: true }, // 默认只展开一个统计节点
    data: { type: Array, default: () => [] },
    props: {
      type: Object, default: () => {
        return { label: 'name', children: 'children' }
      }
    },
    defaultCheckedKeys: { type: Array, default: () => [] }, // 默认勾选节点key的数组
    defaultExpandedKeys: { type: Array, default: () => [] },
    defaultExpandAll: { type: Boolean, default: false },
    showSearch: { type: Boolean, default: false }, // 是否显示搜索框
    searchKey: { type: String, default: 'text' }, // 筛选字段
    lazy: { type: Boolean, default: true },
    currentNodeKey: { type: String, default: '' },
    backgroundColor: {
      type: String,
      default: 'transparent'
    },
    borderColor: {
      type: String,
      default: '#E4E7ED'
    },
    color: {
      type: String,
      default: '#333'
    },
    fontSize: {
      type: String,
      default: '1rem'
    },
    dark: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      search: '',
      index: 0
    }
  },
  watch: {
    search(val) {
      this.$refs.elementTree.filter(val.replace(/(^\s*)|(\s*$)/g, ''))
    },
    currentNodeKey(val) {
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.elementTree.setCurrentKey(val)
        }, 500)
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      // setTimeout(() => {
      this.$refs.elementTree.setCurrentKey(this.defaultExpandedKeys[0])
      // }, 500)
    })
  },
  methods: {
    showDateDialog(data) {
      this.$refs.dateDialog.show(data)
    },
    getReplayDate(data) {
      this.$emit('get-replay-date', data)
    },
    setChecked(data, flag, node) {
      this.$refs.elementTree.setChecked(data, flag, node)
    },
    handleCheckChange(data, flag, node) {
      this.$emit('check-change', data, flag, node)
    },
    treeClick(data, node, ele) {
      this.$emit('node-click', data, node, ele)
    },
    treeCheck(data, node) {
      this.$emit('check', data, node)
    },
    filterNode(value, data, node) {
      if (!value) {
        return true
      }
      const _array = [] // 这里使用数组存储 只是为了存储值。
      this.getReturnNode(node, _array, value)
      let result = false
      _array.forEach((item) => {
        result = result || item
      })
      return result
    },
    getReturnNode(node, _array, value) {
      const isPass =
        node.data && node.data[this.searchKey] && node.data[this.searchKey].toLowerCase().indexOf(value.toLowerCase()) !== -1
      isPass ? _array.push(isPass) : ''
      this.index++
      if (!isPass && node.level !== 1 && node.parent) {
        this.getReturnNode(node.parent, _array, value)
      }
    }
  },
  /**
   * 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组
   * @param {Boolean} leafOnly 是否只是叶子节点，默认值为 false
   * @param {Boolean} includeHalfChecked  是否包含半选节点，默认值为 false
   */
  getCheckedNodes(leafOnly = false, includeHalfChecked = false) {
    return this.$refs.elementTree.getCheckedNodes(leafOnly, includeHalfChecked)
  }
}
</script>
<style lang="scss" scoped>
.h-tree-box {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  flex-flow: column nowrap;
}

@mixin treeTheme() {
  .tree-search {
    height: 28px;
  }
  .el-tree {
    flex: 1;
    background: inherit;
    color: inherit;
    border-color: inherit;
    border-width: 1px;
    border-style: solid;
    width: 100%;
    overflow: auto;
    //滚动条样式
    scrollbar-color: #ccc transparent; /* 滑块颜色  滚动条背景颜色 */
    scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */
    &::-webkit-scrollbar {
      width: 5px;
      height: 1px;
    }

    &::-webkit-scrollbar-thumb {
      //滑块部分
      border-radius: 5px;
      background-color: #fff;
    }

    &::-webkit-scrollbar-track {
      //轨道部分
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: transparent;
      border-radius: 5px;
    }

    .tree-ellipsis {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
      padding-right: 10px;

      i {
        width: 14px;
        font-size: 14px;
      }

      em {
        flex: 1;
        font-style: normal;
        padding: 0 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .online {
        color: #409EFF;
      }

      .play {
        color: #67C23A;
      }
    }
  }
  .el-tree-node__expand-icon {
    color: inherit;

    &.is-leaf {
      color: transparent;
    }
  }
  .el-tree-node__content:hover {
    background-color: #409EFF;
    color: white;

    .tree-ellipsis {
      i {
        color: inherit !important;
      }
    }
  }
  .el-tree-node:focus > .el-tree-node__content {
    background-color: transparent;
  }
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
    background-color: #0353a4;
    color: white;
  }
}

@mixin darkTheme {
  background-color: #3c3f41 !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, .2) !important;
  .tree-search {
    input {
      background: transparent;
      border-color: rgba(255, 255, 255, .2) !important;
      color: #FFFFFF;
    }
  }
}

.h-tree-box /deep/ {
  @include treeTheme;
}

.h-dark /deep/ {
  @include darkTheme
}
</style>
